<template>
  <div class="article">
    <div class="articleHeader">
      <span>
        <el-input
          v-model="searchTags"
          placeholder="请输入"
          clearable
          style="width: 300px"
        >
          <template #prepend> 标签 </template>
          <template #append>
            <el-button @click="searchArticles()"
              ><el-icon><IEpSearch></IEpSearch></el-icon
            ></el-button>
          </template>
        </el-input>
      </span>

      <span
        ><el-button @click="Blog.articleAdd()">新建文章</el-button>
        <el-button @click="Blog.articlesDelete(1)">批量删除</el-button>
      </span>
      <el-dropdown>
        <span class="dataOperation"
          >数据导出
          <el-icon :size="15">
            <IEpArrowUp></IEpArrowUp>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="Blog.exportFile(1)"
              >导出全部</el-dropdown-item
            >
            <el-dropdown-item @click="Blog.exportFile(2)"
              >导出部分</el-dropdown-item
            >
            <el-dropdown-item @click="Blog.exportFile(3)"
              >导出.md文件</el-dropdown-item
            >
            <el-dropdown-item divided>
              <el-tooltip
                effect="dark"
                content="注意：文件最大限制1024KB"
                placement="left"
                ><el-upload
                  ref="articlesFiles"
                  v-model:file-list="Blog.article.articleFileList"
                  :show-file-list="false"
                  :limit="1"
                  :on-exceed="articleUploadExceed"
                  :auto-upload="false"
                  :on-change="articleUploadChange"
                >
                  <span class="fileSpan"> 导入</span>
                </el-upload></el-tooltip
              >
            </el-dropdown-item>
          </el-dropdown-menu>
        </template></el-dropdown
      >
    </div>
    <div class="articleBody">
      <div class="articlesFilter">
        <el-button @click="Blog.article.filter = { type: -1, isPublish: -1 }"
          >全部</el-button
        >
        <el-dropdown style="margin-left: 10px">
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="Blog.article.filter.type = -1"
                >来源</el-dropdown-item
              >
              <el-dropdown-item @click="Blog.article.filter.type = 0"
                >原创</el-dropdown-item
              >
              <el-dropdown-item @click="Blog.article.filter.type = 1"
                >转载</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
          <el-button class="dataOperation">
            {{
              Blog.article.filter.type == -1
                ? "来源"
                : Blog.article.filter.type == 0
                ? "原创"
                : "转载"
            }}<el-icon :size="15"> <IEpArrowUp></IEpArrowUp> </el-icon>
          </el-button>
        </el-dropdown>
        <el-dropdown style="margin-left: 10px">
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="Blog.article.filter.isPublish = -1"
                >全状态</el-dropdown-item
              >
              <el-dropdown-item @click="Blog.article.filter.isPublish = 0"
                >已发表</el-dropdown-item
              >
              <el-dropdown-item @click="Blog.article.filter.isPublish = 1"
                >未发表</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
          <el-button class="dataOperation">
            {{
              Blog.article.filter.isPublish == -1
                ? "全状态"
                : Blog.article.filter.isPublish == 0
                ? "已发表"
                : "未发表"
            }}<el-icon :size="15"> <IEpArrowUp></IEpArrowUp> </el-icon>
          </el-button>
        </el-dropdown>
      </div>

      <el-table
        ref="articleTable"
        :data="getData"
        @selection-change="artitcleSelectionChange"
        @cell-dblclick="Blog.artitcHeaderEdit"
        row-key="id"
        :expand-row-keys="Blog.article.expandRows"
        @expand-change="Blog.artitcleExpandChange"
        border
        stripe
      >
        <template #empty>
          {{ $t("default.noData") }}
        </template>
        <el-table-column type="selection" width="60" align="center" />
        <el-table-column
          width="100"
          align="center"
          label="展开"
          type="expand"
          fixed
          ><template #default="{ row }">
            <el-descriptions border :column="3">
              <el-descriptions-item label="创建时间" :width="100">{{
                row.createDateTime
              }}</el-descriptions-item>
              <el-descriptions-item label="发表时间" :width="100">{{
                row.publishDateTime
              }}</el-descriptions-item>
              <el-descriptions-item label="最后修改时间" :width="100">{{
                row.saveDateTime
              }}</el-descriptions-item>
              <el-descriptions-item label="标签">
                <el-tag
                  closable
                  :disable-transitions="false"
                  @close="Blog.deleteTag(row, item)"
                  style="margin-right: 10px"
                  v-for="item in row.tags.filter((v:number,i:number)=>i<row.tags.length-1)"
                  >{{ Blog.article.tags[item] }}</el-tag
                >
                <el-input
                  v-if="Blog.article.isTabInputDisplay"
                  ref="InputRef"
                  v-model="row.tags[row.tags.length - 1]"
                  size="small"
                  autofocus
                  clearable
                  @keyup.enter="Blog.addTag(row)"
                  @blur.stop="Blog.addTag(row)"
                />
                <el-button
                  v-else
                  size="small"
                  @click="Blog.article.isTabInputDisplay = true"
                >
                  + {{ $t("default.newTag") }}
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="id" align="center" fixed>
          <template #header
            ><div class="columnHeader">
              <el-icon :size="15"><IEpHelp></IEpHelp></el-icon><span>编号</span>
            </div></template
          ></el-table-column
        >
        <el-table-column width="120" header-align="center">
          <template #header>
            <div class="columnHeader">
              <el-icon :size="15"
                ><ICarbonTouchInteraction></ICarbonTouchInteraction></el-icon
              ><span>操作</span>
            </div>
          </template>
          <template #default="{ row }">
            <div class="columnOperation">
              <el-tooltip effect="dark" content="预览" placement="bottom">
                <el-icon :size="20"
                  ><IAntDesignEyeOutlined></IAntDesignEyeOutlined></el-icon
              ></el-tooltip>
              <el-tooltip effect="dark" content="编辑" placement="bottom">
                <el-icon :size="20" @click="Blog.articleContentEdit(row.id)"
                  ><IEpEditPen></IEpEditPen></el-icon></el-tooltip
              ><el-tooltip effect="dark" content="删除" placement="bottom">
                <el-icon :size="20" @click="Blog.articlesDelete(0, row.id)"
                  ><IEpDocumentDelete></IEpDocumentDelete></el-icon
              ></el-tooltip></div
          ></template>
        </el-table-column>
        <el-table-column prop="title" align="center">
          <template #header
            ><div class="columnHeader">
              <el-icon :size="15"
                ><IMdiSubtitlesOutline></IMdiSubtitlesOutline></el-icon
              ><span>标题</span>
            </div></template
          >
          <template #default="{ row }">
            <span v-if="row.isTitleEdit"
              ><el-input v-model="row.title" @blur="blurEdit(1, row)" />
            </span>
            <b v-else>{{ row.title }}</b>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="author" align="center">
          <template #header
            ><div class="columnHeader">
              <el-icon :size="15"
                ><IAntDesignUserOutlined></IAntDesignUserOutlined></el-icon
              ><span>作者</span>
            </div></template
          >
          <template #default="{ row }">
            <span v-if="row.isAuthorEdit"
              ><el-input
                v-model="row.author"
                @blur="blurEdit(2, row)"
              ></el-input>
            </span>
            <el-tag v-else> {{ row.author }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="type" align="center">
          <template #header
            ><div class="columnHeader">
              <el-icon :size="15"
                ><ICarbonConnectSource></ICarbonConnectSource></el-icon
              ><span>来源</span>
            </div></template
          >
          <template #default="{ row }">
            <span
              ><el-select v-model="row.type"
                ><el-option :value="true" label="原创" />
                <el-option :value="false" label="转载"
              /></el-select>
            </span>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="isPublish" align="center">
          <template #header
            ><div class="columnHeader">
              <el-icon :size="15"
                ><IAntDesignSwitcherOutlined></IAntDesignSwitcherOutlined></el-icon
              ><span>状态</span>
            </div></template
          >
          <template #default="{ row }">
            <el-tag>{{ row.isPublish ? "已发表" : "未发表" }}</el-tag></template
          >
        </el-table-column>
        <el-table-column
          width="100"
          prop="isTop"
          align="center"
          class-name="columnIsTop"
        >
          <template #header>
            <div class="columnHeader">
              <el-icon :size="15"
                ><IMdiBookmarkOutline></IMdiBookmarkOutline></el-icon
              ><span>置顶</span>
            </div>
          </template>
          <template #default="{ row }">
            <el-icon
              :size="25"
              @click="
                row.isTop
                  ? () => {
                      row.isTop = true;
                    }
                  : (row.isTop = false);
                Blog.setTop(row.isTop);
              "
              ><icon
                :icon="
                  row.isTop
                    ? 'mdi:bookmark-check-outline'
                    : 'mdi:bookmark-minus-outline'
                "
                style="color: var(--theme-color)"
              ></icon
            ></el-icon>
            <el-icon
              :size="25"
              @click="
                !row.isTop ? (row.isTop = true) : (row.isTop = false);
                Blog.setTop(row.isTop);
              "
              ><icon
                :icon="
                  !row.isTop
                    ? 'mdi:bookmark-check-outline'
                    : 'mdi:bookmark-minus-outline'
                "
              ></icon
            ></el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  // name: "article",
};
</script>
<script setup lang="ts">
import {
  ElMessageBox,
  ElTable,
  genFileId,
  UploadFile,
  UploadFiles,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from "element-plus";
import { useBlog } from "../../../store/blog";

const Blog = useBlog();
const blurEdit = (type: number, row: any) => {
  if (type == 1) row.isTitleEdit = false;
  else if (type == 2) row.isAuthorEdit = false;
};
const articleTable = ref<InstanceType<typeof ElTable>>();

const artitcleSelectionChange = (selection: any[]) => {
  Blog.article.selection = selection.map((v: any) => {
    return v.id;
  });
};

const searchTags = ref("");
watch(searchTags, (newValue, oldValue) => {
  if (newValue.length == 0) i.value = "";
});
const i = ref("");
const searchArticles = () => {
  i.value = searchTags.value;
};
const getData = computed(() => {
  //所有符合搜索值的标签下标
  let indexs: number[] = [];
  Blog.article.tags.forEach((data: string) => {
    if (data.includes(i.value)) {
      indexs.push(Blog.article.tags.indexOf(data));
    }
  });
  return Blog.getArticlesFilter().filter((data: { tags: number[] }) => {
    for (let item of indexs) {
      if (!i.value || data.tags.includes(item)) return true;
    }
  });
});

//文件导入
const articlesFiles = ref<UploadInstance>();

const articleUploadExceed: UploadProps["onExceed"] = (files) => {
  articlesFiles.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  articlesFiles.value!.handleStart(file);
};

const articleUploadChange: UploadProps["onChange"] = (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  ElMessageBox.confirm(
    `是否导入<strong><i>${uploadFile.name}</i></strong>文件内容`,
    "注意：导入前请保存原有内容，内容丢失后果由个人承担！",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      showClose: false,
      type: "error",
      dangerouslyUseHTMLString: true,
    }
  )
    .then(() => {
      const reader = new FileReader();
      reader.readAsText(uploadFile.raw as Blob, "UTF-8");
      reader.onload = (e) => {
        const dataJson = JSON.parse(e.target?.result as string);

        let str = uploadFile.name.split("--");
        let result = {
          author: str[0],
          title: str[1].slice(0, -3),
          conten: dataJson,
          isAuthorEdit: false,
          isTitleEdit: false,
        } as any;
        Object.keys(result).forEach((key) => {
          Blog.article.articlesForm[key] = result[key];
        });

        Blog.articleAdd();
      };
      ElMessage({
        type: "success",
        message: "成功导入！",
        duration: 500,
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消导入！",
        duration: 500,
      });
    });
};
</script>
<style scoped lang="scss">
.article {
  width: 100%;
  height: 100%;
  .articleHeader {
    padding-left: 20px;
    width: calc(100% - 20px);
    height: 50px;
    background: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    > span {
      &:first-child {
        display: inline-flex;
        justify-content: space-between;
      }
    }

    .dataOperation {
      height: 50px;

      display: inline-flex;
      align-items: center;
      white-space: nowrap;

      padding: 0px 10px;
      border-radius: 5px;
      border-left: 1px solid rgb(204, 204, 204);
      border-right: 1px solid rgb(204, 204, 204);
      .el-icon {
        margin-left: 5px;
        transition: transform 0.66s ease;
      }
      &:hover {
        .el-icon {
          transform: rotateX(180deg);
        }
      }
    }
  }

  .articleBody {
    margin-top: 20px;
    height: calc(100% - 70px);
    background: #fff;

    .articlesFilter {
      padding-left: 20px;
      width: 100%;
      height: 50px;
      background: #fff;

      display: inline-flex;
      align-items: center;

      .dataOperation {
        display: inline-flex;
        align-items: center;
        .el-icon {
          margin-left: 5px;
          transition: transform 0.66s ease;
        }
        &:hover {
          .el-icon {
            transform: rotateX(180deg);
          }
        }
      }
    }

    .el-table,
    :deep(th),
    :deep(td) {
      border: 1px solid rgb(162, 162, 162);
    }

    .columnHeader {
      display: inline-flex !important;
      align-items: center;
      .el-icon {
        margin-right: 5px;
      }
    }

    .columnOperation {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;

      .el-icon {
        transition: color 0.66s ease;
        &:hover {
          color: var(--theme-color);
          transition: color 0.66s ease;
        }
      }
    }

    .columnIsTop {
      .el-icon:last-child {
        width: 0px;
        transition: width 1s ease;
        transition-delay: 2s;
      }
      &:hover {
        .el-icon:last-child {
          width: 50%;
          transition: width 1s ease;
          transition-delay: 0s;
        }
      }
    }
  }
}

.fileSpan {
  position: absolute;
  right: 0px;
  text-indent: 16px;
  width: 100%;
}

.el-descriptions {
  .el-tag {
    // max-width: 300px;
    word-break: break-all;
  }
}
</style>
